<template>
	<div class="overFlow_routerBox_warper">
		<!-- ..........................pc端...........................- -->
		<div class="overFlow_routerBox_centent">
			<div class="centent_title">
				<ul class="statusList-list">
					<a href="javaScript:;" @click="changeOrderStatus(0)"
						:class="{isShowBorder:currentOrderStatus === 0}">
						<li>{{$t('profile.all')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(1)"
						:class="{isShowBorder:currentOrderStatus === 1}">
						<li>{{$t('profile.Approved')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(2)"
						:class="{isShowBorder:currentOrderStatus === 2}">
						<li>{{$t('profile.Submitted')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(3)"
						:class="{isShowBorder:currentOrderStatus === 3}">
						<li>{{$t('profile.Review')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(4)"
						:class="{isShowBorder:currentOrderStatus === 4}">
						<li>{{$t('profile.Completed')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(5)"
						:class="{isShowBorder:currentOrderStatus === 5}">
						<li>{{$t('profile.Closed')}}</li>
					</a>
					<a href="javaScript:;" @click="changeOrderStatus(6)"
						:class="{isShowBorder:currentOrderStatus === 6}">
						<li>{{$t('profile.Cancelled')}}</li>
					</a>
				</ul>
			</div>
		</div>

		<div class="boxWrap">
			<div class=" application-review">
				<span class="review-text"> {{$t('profile.Amazon')}} 100% <i @mouseenter="mouseChange"
						@mouseout="mouseChangeOut" class="points-i , hhh"><span @mouseenter="mouseChange"
							v-show="showPoints" class="reward-text commonShadow">
							{{$t('profile.Rebiew')}}
							{{PercentageObj.reviewRate}}% <br> <span @mouseenter="mouseChange" data-v-58301a21=""
								style="color: red;">{{$t('profile.AMOZON')}}</span></span></i></span>
				<span class="review-text" style="margin-left:80px"> {{$t('profile.Purchase')}}
					{{PercentageObj.purchaseRate}}% <i @mouseenter="mouseChange2" @mouseout="mouseChangeOut2"
						class="points-i , hhh"><span @mouseenter="mouseChange2" v-show="showPoints2"
							class="reward-text commonShadow">
							{{$t('profile.Rate')}} <br> <span @mouseenter="mouseChange2" data-v-58301a21=""
								style="color: red;">{{$t('profile.PurcH')}}</span></span></i></span>
			</div>

			<div class="orderItem_orderItem" v-for="(item , index) in shopOrderList" :key="index">
				<div class="orderItem_orderItem_top">
					<div class="orderItem_imgBox">
						<img style="height:159px;width:159px" :src="'https://mottecommerce.com/'+item.productImage"
							alt="">
					</div>
					<div class="orderItem_contentBox_text1">
						<p class="orderItem_contentBox_text_p1">{{item.productName}}</p>
						<div>
							<span class="orderItem_contentBox_text_sapn1"
								v-if="item.status == 2">{{$t('application.ApprovedApplication')}}</span>
							<span class="orderItem_contentBox_text_sapn1"
								v-if="item.status == 8">{{$t('application.PendingOrder')}}</span>
							<span class="orderItem_contentBox_text_sapn1"
								v-if="item.status == 2">{{$t('application.Pending')}}</span>
							<span class="orderItem_contentBox_text_sapn1"
								v-if="item.status == 4">{{$t('application.Closed')}}</span>
							<van-count-down :time="item.remainingTime" v-if="item.status == 2">
								<template #default="timeData">
									<span class="block">time 0d</span>
									<span class="colon">:</span>
									<span class="block"> {{ timeData.hours }}h</span>
									<span class="colon">:</span>
									<span class="block"> {{ timeData.minutes }}m</span>
									<span class="colon">:</span>
									<span class="block"> {{ timeData.seconds }}s</span>
								</template>
							</van-count-down>
							<!-- <span class="orderItem_contentBox_text_sapn1">{{$t('application.ApprovedApplication')}}</span> -->
						</div>
					</div>
					<div class="orderItem_contentBox_text2">
						<div class="orderItem_contentBox_text2_top">
							<p class="orderItem_contentBox_text2_top_p">{{$t('profile.OriginalPrice')}}</p> <span
								class="orderItem_contentBox_text2_top_sapn"
								style="width:80px;">￥{{item.productPrice}}</span>
						</div>
						<div class="orderItem_contentBox_text2_top">
							<p class="orderItem_contentBox_text2_top_p">{{$t('profile.Shipping')}}</p> <span
								class="orderItem_contentBox_text2_top_sapn">￥0</span>
						</div>
						<div class="orderItem_contentBox_text2_top">
							<p class="orderItem_contentBox_text2_top_p" style="color:black;">{{$t('profile.Total')}}</p>
							<span class="orderItem_contentBox_text2_top_sapn orangeColor">￥{{item.productPrice}}</span>
						</div>
						<div class="orderItem_contentBox_text2_top orderItem_contentBox_text2_top_X">
							<p class="orderItem_contentBox_text2_top_p" style="color:black;">{{$t('profile.Original')}}
							</p> <span
								class="orderItem_contentBox_text2_top_sapn orangeColor">￥{{item.productPrice}}</span>
						</div>
					</div>

					<div class="orderItem_contentBox_text3">
						<template v-if="item.status == 2">
							<div class="orderItem_yellowBtn_text3_centent01 color_text03_a"
								@click="showSubmitBoxHandler(item)">
								{{$t('profile.Submit')}}
							</div>
							<div class="orderItem_yellowBtn_text3_centent01" @click="BuyNowHandler(item.reviewTaskId)">
								{{$t('profile.BuyNow')}}
							</div>
							<div class="orderItem_yellowBtn_text3_centent01"
								@click="showClearGoods = true;removeShopCartID = item.id">
								{{$t('profile.Delete')}}
							</div>
						</template>
						<template v-if="item.status == 8">
							<div class="orderItem_yellowBtn_text3_centent01 color_text03_a"
								@click="editOrderData(item)">
								{{$t('profile.editOrder')}}
							</div>
						</template>
						<template v-if="item.status == 10 || item.status == 9">
							<div class="orderItem_yellowBtn_text3_centent01 color_text03_a">
								<a style="color: #fff;" target="_blank"
									href="https://www.amazon.com/gp/css/order-history">{{$t('application.Writeacomments')}}</a>
							</div>
							<div class="orderItem_yellowBtn_text3_centent01 color_text03_a"
								@click="showSubmitCommentBox = true;currentItem = item">
								{{$t('application.uploadbtn')}}
							</div>
						</template>
						<div v-if="item.status == 11" class="orderItem_yellowBtn_text3_centent01 color_text03_a"
							@click="goPage('/balance')">
							{{$t('application.orderbtn11')}}
						</div>

					</div>

				</div>
				<div class="orderItem_orderItem_bottom" v-if="item.status != 4">
					<ul class="orderItem_orderItem_bottom_ul">
						<li>
							<span class="orderItem_orderItem_bottom_ul_span"
								:class="item.status > 0 && 'orderItem_orderItem_bottom_ul_span-active'">
								<i class="color_i"></i>
							</span>
							<p class="orderItem_orderItem_bottom_ul_p">{{$t('profile.submission1')}}</p>
						</li>
						<li>
							<span class="orderItem_orderItem_bottom_ul_span"
								:class="item.status > 4 && 'orderItem_orderItem_bottom_ul_span-active'">
								<i class="color_i"></i>
							</span>
							<p class="orderItem_orderItem_bottom_ul_p">{{$t('profile.submission2')}}</p>
						</li>
						<li>
							<span class="orderItem_orderItem_bottom_ul_span"
								:class="item.status == 11 && 'orderItem_orderItem_bottom_ul_span-active'">
								<i class="color_ix"></i>
							</span>
							<p class="orderItem_orderItem_bottom_ul_p">{{$t('profile.submission3')}}</p>
						</li>
					</ul>
				</div>
				<div class="orderItem_orderItem-bottomBox_1ZNdJ" @click="orderinfoClick(status)">
					<span> {{$t(`application.orderInfo${item.status}`)}}</span>
				</div>

			</div>
		</div><!-- ..........................移动...........................- -->
		<div class="wallet-box">
			<div class="wallet-box-title">{{$t('application.MyCashBalance')}}</div>
			<div class="wallet-box-content">
				<div class="priceText">
					<span>￥</span>{{userinfo.cashBackBalance}}
				</div>
				<div class="withdraw-btn" @click='goPage("/balance")'>{{$t('application.Withdraw')}}</div>
			</div>
		</div>
		<div class="status-box">
			<div class="status-content">{{$t(`application.${orderStatusList[currentOrderStatus]}`)}}
				<span class="application-badge">{{shopOrderList.length}}</span>
			</div>
			<div class="select-box">
				<div class="select-content" @click='changeStatusShow = !changeStatusShow'>
					<span>{{$t('application.Status')}}</span>
					<i class="select-arrow van-icon van-icon-arrow"></i>
				</div>
				<ul class="select-list commonShadow"
					:style="{display: changeStatusShow ? 'block' : 'none',opacity: changeStatusShow ? 1 : 0}">
					<li v-for="(item,index) in orderStatusList" :class="currentOrderStatus == index && 'active'"
						@click="changeOrderStatus(index) " :key="index">{{$t(`application.${item}`)}}</li>
					<!-- active -->
				</ul>
			</div>
		</div>
		<div class="order-box-warp">
			<van-collapse v-model="collapseActiveNames" accordion>
				<van-collapse-item :title="$t('application.MyRate')" name="1">
					<div class="review-text" v-for="index in 3">
						{{$t(`application.myRate${index}_1`)}}: {{PercentageObj.reviewRate}}%
						<el-tooltip class="item" effect="light" placement="bottom">
							<div slot='content'>
								<span class="reward-text-tooltip" v-html="$t(`application.myRate${index}_2`)"></span>
							</div>
							<van-icon name="question" color="#50be8d" />
						</el-tooltip>
						{{$t(`application.myRate${index}_3`)}}
					</div>
				</van-collapse-item>
			</van-collapse>
			<div class="mb-order-list">
				<div class="order-item" v-for="(item,index) in shopOrderList" :key='index'
					:class="(item.status == 4|| item.status == 5 || item.status == 14 )&& 'order-item-close'">
					<div class="order-no">
						<span>{{$t('application.OrderNo')}}:{{item.orderNumber}}</span>
						<span class="order-status"
							v-if="item.status == 4 || item.status == 5 || item.status == 14">{{$t('application.OrderClosed')}}</span>
						<span class="order-status" v-else>{{$t(`application.ordertype${item.status}`)}}</span>
					</div>
					<div class="order-detail">
						<div class="order-img">
							<img :src="'https://mottecommerce.com/'+item.productImage" alt="">
						</div>

						<el-tooltip  v-if="item.status == 2 || item.status == 9" class="item" effect="light" placement="bottom">
							<div slot='content'>
								<div class="orderItem_more_box">
									<template v-if="item.status == 2">
										<div class="orderItem_more_box_item" @click="BuyNowHandler(item.reviewTaskId,'mb')">
											{{$t('application.RefertoEarn')}} ￥500
										</div>
										<div class="orderItem_more_box_item"
											@click="showClearGoods = true;removeShopCartID = item.id">
											{{$t('profile.Delete')}}
										</div>
									</template> 
									<template v-if="item.status == 9">
										<div class="orderItem_more_box_item" @click="showNoReview = true;currentItem = item">
											{{$t('application.CanReview')}}
										</div>
									</template>
								</div>
							</div>
							<van-icon name="ellipsis" class="orderItem_moreBtn_UzvXt" size="20" color="#b2b2b2" />
						</el-tooltip>
						<div class="goods-desc">
							<div class="goods-title van-multi-ellipsis--l2">{{item.productName}}</div>
							<div class="goods-price">
								￥0 <span class="decoration-text">￥{{item.productPrice}}</span>
								{{$t('application.Rebate')}} ￥{{item.productPrice}}
							</div>
							<div class="order-item-content-tag">
								<span class="orderItem_tag_1ef_P"
									v-if="$t(`application.ordertip${item.status}`).indexOf('ordertip') == -1">{{$t(`application.ordertip${item.status}`)}}</span>
								<span>
									{{$t('application.OrderLifeline')}}
									<van-icon @click='currentItem = item;currentOrderLifeline = true' name="question"
										color="#50be8d" />
								</span>
							</div>
							<div class="order-item-content-btn">
								<span class="close" v-if="item.status == 2"
									@click="BuyNowHandler(item.reviewTaskId,'mb')">
									{{$t('application.BuyonAmazon')}} ￥500 </span>
								<span class="close" v-if="item.status != 2" @click="goPage('/referral')">
									{{$t('application.RefertoEarn')}} ￥500 </span>
								<span class="primary" v-if="item.status == 2" @click="showSubmitBoxHandler(item)">
									{{$t('profile.Submit')}}</span>
								<span class="primary" v-if="item.status == 8" @click="editOrderData(item)">
									{{$t('application.orderBtn8')}}</span>
								<span class="primary" v-if="item.status == 9"
									@click="showSubmitCommentBox = true;currentItem = item">
									{{$t('application.uploadbtn')}}</span>
								<span class="primary" v-if="item.status == 11" @click="goPage('/balance')">
									{{$t('application.orderbtn11')}}</span>
							</div>
						</div>
					</div>
					<div class="order-info">
						{{$t(`application.orderInfo${item.status}`)}}
					</div>
				</div>
			</div>
		</div>



		<div class="noDataBox" v-show='shopOrderList.length == 0 '>
			<i class="el-icon-shopping-cart-2 shopCar"></i>
			<p class="noneText">{{$t('application.shopCarNoData')}}</p>
			<span class="noneBtn" @click="goPage('/shop')">{{$t('application.GoShoppingNow')}}</span>
		</div>


		<div class="common-page-box" v-show='shopOrderList.length'>
			<van-icon class-prefix="iconfont" @click='Lastpage' size="1.55rem" name="yuanjiantou1"
				:color="pageCurrent > 1 ? '#50be8d' : ''" />
			<span class="common-page-box-num">{{pageCurrent}}</span>
			<van-icon class-prefix="iconfont" @click='Nextpage' size="1.55rem" name="yuanjiantou1-copy"
				:color="pageCurrent < TotalPage ? '#50be8d' : ''" />
		</div>


		<!-- 提交订单弹窗 -->
		<van-popup v-model="showSubmitBox">
			<div class="apply-content">
				<div class="apply-header">
					<van-icon name="close" @click='showSubmitBox = false' />
				</div>
				<div class="apply-body">
					<div class="apply-order">
						<van-form>
							<p class="apply-order-title">{{$t('application.ordernumber')}}</p>
							<van-field v-model="submitOrderData.orderNumber" :name="$t('application.ordernumber')"
								:placeholder="$t('application.ordernumber')"
								:rules="[{ required: true, message: $t('application.ordernumber') }]" />
							<div style="margin: 1rem 0;">
								<p class='apply-amount'>{{$t("application.RebateAmount")}}:
									￥{{currentItem.productPrice}}</p>
								<p class='apply-amount'>
									{{$t("application.RebateAmount")}}=({{$t('application.pricesCoupon')}})*100%
								</p>
								<p class='apply-amount'>({{$t('application.NotInclude')}})</p>
							</div>
							<p style="font-size: 0.5rem;">{{$t('application.RebateAmountcorrect')}}?</p>
							<van-radio-group v-model="submitOrderData.type" direction="horizontal">
								<van-radio checked-color="#ff5900" :name="0">{{$t('application.Correct')}}</van-radio>
								<van-radio checked-color="#ff5900" :name="1">{{$t('application.Incorrect')}}</van-radio>
							</van-radio-group>
							<div v-show="submitOrderData.type == 1" style="margin-top: 0.5rem;">
								<p class="apply-amount" style="color: #ff5900;">
									{{$t('application.AmazonPurchaseDetails')}}
								</p>
								<p class="apply-amount" style="color: #ff5900;">
									{{$t('application.ItempriceonAmazo')}}:<span>￥</span>
								</p>
								<van-field v-model="submitOrderData.price" :name="$t('application.ItempriceonAmazo')"
									:placeholder="$t('application.ItempriceonAmazo')"
									:rules="[{ required: true, message:$t('application.ItempriceonAmazo') }]" />
								<p class="apply-amount" style="color: #ff5900;">
									{{$t('application.YourCouponAmount')}}:<span>￥</span>
								</p>
								<van-field v-model="submitOrderData.Coupon " :name="$t('application.YourCouponAmount')"
									:placeholder="$t('application.YourCouponAmount')"
									:rules="[{ required: true, message:$t('application.YourCouponAmount') }]" />
								<p class="apply-amount" style="color: #ff5900;">
									{{$t('application.submitOrderBox1')}}{{$t('application.NotInclude')}}:<span>￥{{RebateAmount}}</span>
								</p>
							</div>

							<div class="apply-photo">
								<van-uploader class="uploadImg" v-if="uploadFill.length == 0" v-model="uploadFill">
									<img :src="$i18n.locale == 'en-US' ? require('../../assets/image/uploadBg.png') : require('../../assets/image/uploadBg-jp.png') " alt="">
								</van-uploader>
								<!-- {{uploadFill}} -->
								<div class="apply-photo-image" v-if="uploadFill.length > 0">
									<van-icon name="clear" @click='uploadFill = []' />
									<van-image v-for="(item,index) in uploadFill" fit="cover" :src="item.content"
										:key="index">
									</van-image>
								</div>
								<img class="Example" @click="showExampleImg" src="../../assets/image/Example.png"
									alt="">
							</div>
							<div style="margin: 16px;">
								<van-button @click='submitOrderDataHandler' class="apply-order-submit" round block
									type="info" native-type="submit">
									{{$t('application.submit')}}
								</van-button>
							</div>
							<div>
								{{$t('application.submitOrderTip')}}
							</div>
						</van-form>
					</div>
				</div>
			</div>
		</van-popup>

		<!-- 当前订单的流程状态 -->
		<van-popup v-model="currentOrderLifeline" round style="border-radius: .3rem;">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="currentOrderLifeline = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					<p class="title" style="font-size: 0.9rem;">{{$t('application.submitOrderBox2')}}</p>
					<div class="stepBox">
						<div class="stepItem"><span class="num num--active"
								:class="{'num--currentActive' : currentItem.stastus == 2,}">1</span>
							<p class="text text--active" :class="{'text--currentActive' :currentItem.status == 2,}">
								{{$t('application.submitOrderBox3')}}
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  8, 'num--active' : currentItem.status >=  8}">2</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 8,'text--active' : currentItem.status >= 8}">
								{{$t('application.submitOrderBox4')}}.
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  9, 'num--active' : currentItem.status >=  9}">3</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 9,'text--active' : currentItem.status >= 9}">
								{{$t('application.submitOrderBox5')}}
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  10, 'num--active' : currentItem.status >=  10}">4</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 10,'text--active' : currentItem.status >= 10}">
								{{$t('application.submitOrderBox6')}}
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  10, 'num--active' : currentItem.status >=  10}">5</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 10,'text--active' : currentItem.status >= 10}">
								{{$t('application.submitOrderBox7')}}
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  11, 'num--active' : currentItem.status >=  11}">6</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 11,'text--active' : currentItem.status >= 11}">
								{{$t('application.submitOrderBox8')}}
							</p>
						</div>
						<div class="stepItem"><span class="num"
								:class="{'num--currentActive' : currentItem.status ==  12, 'num--active' : currentItem.status >=  12}">7</span>
							<p class="text"
								:class="{'text--currentActive' :currentItem.status == 12,'text--active' : currentItem.status >= 12}">
								{{$t('application.submitOrderBox9')}}
							</p>
						</div>
					</div>
					<div class="apply-body-btn" style="width: 13rem;height: 1.5rem;line-height: 1.5rem;"
						@click="currentOrderLifeline = false">OK</div>
				</div>
			</div>
		</van-popup>
		<!-- 拷贝成功弹窗 -->
		<van-popup v-model="showCopyBox" round style="border-radius: .3rem;">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showCopyBox = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					{{$t('application.copyTextSuccess1')}},
					<br>
					{{$t('application.copyTextSuccess2')}}
				</div>
			</div>
		</van-popup>
		<!-- 删除商品弹窗 -->
		<van-popup v-model="showClearGoods" round style="border-radius: .3rem;">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showClearGoods = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					{{$t('application.clearGoodsConfirmationtip1')}},
					<br>
					{{$t('application.clearGoodsConfirmationtip2')}}
					<div style="margin: 1rem 0 ;display: flex;justify-content: space-around;">
						<div class="orderItem_yellowBtn_text3_centent01 color_text03_a"
							@click="removerShopCartGoods(removeShopCartID)" style="background: #ff5900;">
							{{$t('application.clearGoodsConfirmationbtn1')}},
						</div>
						<div class="orderItem_yellowBtn_text3_centent01 color_text03_a" @click="showClearGoods = false">
							{{$t('application.clearGoodsConfirmationbtn2')}},
						</div>
					</div>
					<p class="deletOrderDialog_note_2pwXy">
						{{$t('application.clearGoodsConfirmation')}}
					</p>
				</div>
			</div>
		</van-popup>
		<!-- 提交订单号完成弹窗 -->
		<van-popup v-model="submitOrderLaterPopup">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="submitOrderLaterPopup = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					<span v-html="$t('application.submitOrderBox11')"></span>
					<div class="apply-body-btn" @click="submitOrderLaterPopup = false">OK</div>
					<span style="color: #666;">
						{{$t('application.submitOrderBox12')}}
					</span>
					<a href="info@mottconsulting.co.jp" style="color: rgb(255, 89, 0);">info@mottconsulting.co.jp</a>
				</div>
			</div>
		</van-popup>
		<!-- 提交评论弹窗 -->
		<van-popup v-model="showSubmitCommentBox">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showSubmitCommentBox = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx notReviewBox">
					<h1 class="cannotReview_title_ZLvpO"> {{$t('application.UploadReviewScreenshot')}}</h1>
					<div class="cannotReview_labelBox_3sYx6">
						<span class="cannotReview_label_J7cwm">{{$t('application.pleaseDescription')}}:</span>
						<div class="cannotReview_content_2k_yB" style="padding: 0px;">
							<van-cell-group>
								<van-field border v-model="submitCommentData.comment" type="textarea"
									:placeholder="$t('application.pleaseEnterDescription')" />
							</van-cell-group>
						</div>
					</div>
					<div class="cannotReview_labelBox_3sYx6 apply-order">
						<span class="cannotReview_label_J7cwm">{{$t('application.Screenshots')}}:</span>
						<div class="cannotReview_content_2k_yB apply-photo">
							<van-uploader class="uploadImg" v-if="submitCommentData.uploadFill.length == 0"
								v-model="submitCommentData.uploadFill">
							</van-uploader>
							<!-- {{submitCommentData.uploadFill}} -->
							<div class="apply-photo-image" v-if="submitCommentData.uploadFill.length > 0">
								<van-icon name="clear" @click='submitCommentData.uploadFill = []' />
								<van-image v-for="(item,index) in submitCommentData.uploadFill" fit="cover"
									:src="item.content" :key="index">
								</van-image>
							</div>
						</div>
					</div>
					<div @click="uploadComment" class="apply-body-btn"
						style="width: 13rem;height: 1.5rem;line-height: 1.5rem;">
						{{$t('application.Confirm')}}
					</div>
				</div>
			</div>
		</van-popup>
		<!-- 无法审查弹窗 -->
		<van-popup v-model="showNoReview">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showNoReview = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx notReviewBox">
					<h1 class="cannotReview_title_ZLvpO"> {{$t('application.CanReview')}}</h1>
					<div class="cannotReview_labelBox_3sYx6">
						<span class="cannotReview_label_J7cwm">{{$t('application.pleaseDescription')}}:</span>
						<div class="cannotReview_content_2k_yB" style="padding: 0px;">
							<van-cell-group>
								<van-field border v-model="submitNoReview.comment" type="textarea"
									:placeholder="$t('application.pleaseEnterDescription')" />
							</van-cell-group>
						</div>
					</div>
					<div class="cannotReview_labelBox_3sYx6 apply-order">
						<span class="cannotReview_label_J7cwm">{{$t('application.Screenshots')}}:</span>
						<div class="cannotReview_content_2k_yB apply-photo">
							<van-uploader class="uploadImg" v-if="submitNoReview.uploadFill.length == 0"
								v-model="submitNoReview.uploadFill">
							</van-uploader>
							<div class="apply-photo-image" v-if="submitNoReview.uploadFill.length > 0">
								<van-icon name="clear" @click='submitNoReview.uploadFill = []' />
								<van-image v-for="(item,index) in submitNoReview.uploadFill" fit="cover"
									:src="item.content" :key="index">
								</van-image>
							</div>
						</div>
					</div>
					<div @click="uploadNoReview" class="apply-body-btn"
						style="width: 13rem;height: 1.5rem;line-height: 1.5rem;">
						{{$t('application.Confirm')}}
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import qs from 'qs'
	import {
		ImagePreview
	} from 'vant'
	export default {
		name: 'application',
		data() {
			return {
				isShowBorder: 'isShowBorder',
				isShow: true,
				showPoints: false,
				showPoints2: false,
				showSubmitBox: false,
				currentItem: {}, //我点击选中的订单
				submitOrderData: {
					type: 0,
					price: '',
					Coupon: '',
					orderNumber: ''
				},
				uploadFill: [],

				// 移动端------
				changeStatusShow: false,
				collapseActiveNames: '1',
				orderStatusList: ['All', 'Approved', 'SubmittedOrder', 'ReviewSubmitted', 'OrderCompleted',
					'OrderClosed', 'OrderCancelled'
				],
				currentOrderStatus: 0,
				shopOrderList: [],
				pageCurrent: 1, // 分页页码
				TotalPage: 0,
				removeShopCartID: '',
				showCopyBox: false, // 拷贝成功弹窗
				showClearGoods: false, // 弹出确认删除弹窗
				submitOrderLaterPopup: false, // 提交订单后弹窗	
				currentOrderLifeline: false, // 状态流程图
				showSubmitCommentBox: false, // 提交评论的盒子
				showNoReview:false, // 无法审查
				PercentageObj: { //我的购买率
					averReviewStar: 0, // 评分
					purchaseRate: 100, //购买率
					reviewRate: 100 // 评论律
				},
				submitCommentData: { // 提交评论数据
					comment: '',
					uploadFill: []
				},
				submitNoReview: { // 提交评论数据
					comment: '',
					uploadFill: []
				},
			}
		},
		created() {
			this.getOrderList()
			this.getPercentageObj()
		},
		mounted() {
			// status 0等待提交订单号（批准的申请） -1关闭的（订单超时） 1已提交（已上传凭证/待审核 
			// 2审查已提交（已审核） 3完全的（已完成）  4订单已取消（已取消）
		},
		computed: {
			RebateAmount() {
				return this.submitOrderData.price - this.submitOrderData.Coupon
			},
			userinfo() {
				return this.$store.state.userinfo
			}
		},
		methods: {
			getPercentageObj() {
				this.$axios({
					url: 'user/order/getUserOrderRate',
				}).then(res => {
					this.PercentageObj = res.data
				})
			},
			getOrderList(status = 0) {
				let t = this
				console.log('请求订单')
				this.$axios({
					url: 'user/order/appSiteOrders',
					params: {
						current: this.pageCurrent,
						size: 10,
						source: 3,
						status
					}
				}).then(res => {
					this.shopOrderList = res.data.records.map(item => {
						var time = ((60 * 60 * 4 * 1000) + new Date(item.createdTime).valueOf()) -
							new Date().valueOf()
						return {
							...item,
							remainingTime: time
						}
					})
					this.TotalPage = res.data.pages
					console.log(this.shopOrderList)
				})
			},
			// 复制链接
			BuyNowHandler(id, type) {
				this.$loading()
				this.$axios({
					url: "index/reviewTask/siteApp/id/" + id
				}).then(res => {
					if (type == 'mb') {
						var a = document.createElement("a");
						a.href = res.data.url;
						a.target = "_blank";
						a.click()
						return
					}
					this.$copyText(res.data.url).then(res => {
						this.showCopyBox = true
					})
				})
			},
			// 删除购物车的商品 
			removerShopCartGoods(id) {
				this.$axios({
					url: `user/order/init/id/${id}`,
					method: 'DELETE',
				}).then(res => {
					if (res.data) {
						this.showClearGoods = false
						this.showToast('success', '成功した仕事', 'success')
						this.getOrderList()
					}
				})
			},
			// 提交订单信息
			async submitOrderDataHandler() {
				if (!this.uploadFill.length) {
					return this.showToast('Please upload pictures', '画像をアップロードしてください')
				}
				if (!this.$tool.AmountOrderTest(this.submitOrderData.orderNumber)) {
					return this.showToast('Please input success ordernumber', '成功した注文番号を入力してください')
				}
				this.$loading(2000)
				if (this.uploadFill[0].content.includes('https://mottecommerce.com/')) {
					orderImage = this.uploadFill[0].content.split('https://mottecommerce.com/')[1]
				} else {
					try {
						var orderImage = await this.$tool.uploadOneImg(this.uploadFill[0].file)
					} catch {
						return console.log('upload fail')
					}
				}
				let productPrice = 0
				if (this.submitOrderData.type == 0) {
					productPrice = this.currentItem.productPrice
				} else {
					productPrice = this.RebateAmount
				}
				console.log({
					productPrice,
					orderNumber: this.submitOrderData.orderNumber,
					id: this.currentItem.id,
					orderImage
				})
				if (this.submitOrderType == 'edit') {
					return this.editOrderHandler(productPrice, orderImage)
				}
				this.$axios({
					url: "user/order/addOrderInfo",
					method: 'post',
					data: {
						productPrice,
						orderNumber: this.submitOrderData.orderNumber,
						id: this.currentItem.id,
						orderImage
					}
				}).then(res => {
					if (res.data) {
						this.$tool.paymentSuccess()
						this.showSubmitBox = false;
						this.submitOrderLaterPopup = true;
						this.getOrderList()
					}
				})
			},
			// 修改订单号
			editOrderData(data) {
				this.submitOrderType = 'edit'
				this.currentItem = data
				this.submitOrderData.orderNumber = data.orderNumber
				this.$axios({
					url: "user/order/init/id/" + data.id
				}).then(res => {
					let obj = {
						content: 'https://mottecommerce.com/' + res.data.appealStatus
					}
					this.$set(this.uploadFill, 0, obj)
					console.log(this.uploadFill)
					this.showSubmitBox = true
					this.getOrderList()
				})
			},
			// 提交订单
			showSubmitBoxHandler(item) {
				this.submitOrderType = 'submit'
				this.currentItem = {
					productPrice: item.productPrice,
					id: item.id
				}
				this.uploadFill = []
				this.submitOrderData = {
					type: 0,
					price: '',
					Coupon: '',
					orderNumber: ''
				}
				this.showSubmitBox = true
			},
			// 修改订单号请求
			editOrderHandler(productPrice, orderImage) {
				this.$axios({
					url: "user/order/updateOrderImage",
					method: 'put',
					data: {
						productPrice,
						orderNumber: this.submitOrderData.orderNumber,
						id: this.currentItem.id,
						orderImage,
						orderAmount: productPrice
					}
				}).then(res => {
					if (res.data) {
						this.showSubmitBox = false;
						this.showToast('success', '成功した仕事', 'success')
						this.getOrderList()
					}
				})
			},
			showExampleImg() {
				ImagePreview({
					images:['https://mottecommerce.com/uploads/202104/01/Example.png'],
					closeable: true,
				});
			},
			mouseChange() {
				this.showPoints = true
			},
			mouseChangeOut() {
				this.showPoints = false
			},
			mouseChange2() {
				this.showPoints2 = true
			},
			mouseChangeOut2() {
				this.showPoints2 = false
			},
			goPage(url) {
				this.$router.push(url)
			},
			// 切换展示的订单
			changeOrderStatus(index) {
				this.currentOrderStatus = index
				this.changeStatusShow = false
				var status = 0
				switch (index) {
					case 0:
						status = 0
						break;
					case 1:
						status = 2
						break;
					case 2:
						status = '8'
						break;
					case 3:
						status = '9,10'
						break;
					case 4:
						status = '11,12'
						break;
					case 5:
						status = '4,5,14'
						break;
					case 6:
						status = '16,17'
						break;
				}
				this.getOrderList(status)
				console.log(index)
			},
			// 上传评论截图
			async uploadComment() {
				if (!this.submitCommentData.uploadFill.length) {
					return this.showToast('Please upload pictures', '画像をアップロードしてください')
				}
				if (this.submitCommentData.comment.length == 0) {
					return this.showToast(this.$t('application.pleaseEnterDescription'))
				}
				try {
					var feedbackImage = await this.$tool.uploadOneImg(this.submitCommentData.uploadFill[0].file)
				} catch {
					return console.log('upload fail')
				}
				this.$axios({
					url: "user/orderFeedbackRecord",
					method: "post",
					data: {
						feedback: this.submitCommentData.comment,
						feedbackImage,
						orderId: this.currentItem.id,
						type: 3,
					}
				}).then(res => {
					if (res.data) {
						this.showSubmitCommentBox = false
						this.getOrderList()
						this.showToast('Upload succeeded','アップロード成功')
					}
					console.log(res)
				})
			},
			orderinfoClick(status) {
				switch (status) {
					case 11:
						this.goPage('/balance')
						break;
				}
			},
			Lastpage() {
				if (this.pageCurrent <= 1) {
					return
				}
				this.pageCurrent--;
				this.getOrderList()
			},
			Nextpage() {
				if (this.pageCurrent >= this.TotalPage) {
					return
				}
				this.pageCurrent++;
				this.getOrderList()
			},
			async uploadNoReview(){
				if (!this.submitNoReview.uploadFill.length) {
					return this.showToast('Please upload pictures', '画像をアップロードしてください')
				}
				if (this.submitNoReview.comment.length == 0) {
					return this.showToast(this.$t('application.pleaseEnterDescription'))
				}
				try {
					var feedbackImage = await this.$tool.uploadOneImg(this.submitNoReview.uploadFill[0].file)
				} catch {
					return console.log('upload fail')
				}
				this.$axios({
					url: "user/orderFeedbackRecord",
					method: "post",
					data: {
						feedback: this.submitNoReview.comment,
						feedbackImage,
						orderId: this.currentItem.id,
						type: 2,
					}
				}).then(res => {
					if (res.data) {
						this.showNoReview = false
						this.getOrderList()
						this.showToast('Upload succeeded','アップロード成功')
					}
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 。。。。。。。。。。。。。。。。。。。。。。。。。。。移动端。。。。。。。。。。。。。。。。
	.common-page-box {
		display: flex;
		justify-content: center;
		align-items: center;

		.common-page-box-num {
			font-size: .8rem;
			display: inline-block;
			margin: 0 .45rem;
			cursor: pointer;
			color: #ff5900;
		}
	}

	.decoration-text {
		text-decoration: line-through;
	}

		.orderItem_more_box {
			.orderItem_more_box_item {
				color: #858585 !important;
				font-size: 12px;
				line-height: 1.2;
				border-bottom: 1px solid #eee;
				text-align: left;
				color: #666;
				padding-top: .2rem;
			}
		}
	.order-detail {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 0.5rem;

		.order-item-content-btn {
			margin-top: 0.5rem;
			display: flex;
			justify-content: flex-end;

			span {

				overflow: hidden;
				text-overflow: ellipsis;
				width: 5.55rem;
				text-align: center;
				display: inline-block;
				height: 1.4rem;
				line-height: 1.4rem;
				border: 1px solid #444;
				font-size: .6rem;
				border-radius: .2rem;
				color: #444;
				position: relative;
			}

			.primary {
				margin-left: 0.4rem;
				color: #ff5900;
				border-color: #ff5900;
			}
		}

		.order-item-content-tag {
			margin-top: 0.2rem;
			overflow: hidden;

			.orderItem_tag_1ef_P {
				background-color: #ff5900;
				background: #fff;
				font-size: .55rem;
				border-radius: .1rem;
				display: inline-block;
				margin: .2rem 0 .2rem 0;
				padding: .05rem .1rem;
				border: 1px solid #ffaf5b;
				box-sizing: border-box;
				color: #ffaf5b;
			}

			span {
				font-size: .55rem;
				border-radius: .1rem;
				display: inline-block;
				margin: .2rem 0 .2rem 0;
				border: 1px solid #ffaf5b;
				box-sizing: border-box;
				color: #ffaf5b;
				margin-left: .4rem;
				background: rgba(255, 175, 91, .2);
				border: none;
				padding: .1rem .25rem;
			}
		}

		.goods-price {
			font-size: 0.6rem;
		}

		.orderItem_moreBtn_UzvXt {
			width: .9rem;
			height: .4rem;
			line-height: .4rem; 
			position: absolute;
			bottom: 1rem;
			left: .6rem;
		}

		.goods-desc {
			position: relative;
			flex: 1;
			text-align: left;

			.goods-title {
				font-size: .7rem;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: horizontal;
				box-orient: horizontal;
				padding-right: 1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 20px;
				height: 40px;
				width: 100%;

			}
		}


		.order-img {
			flex-basis: 4rem;
			height: 4rem;
			flex-wrap: nowrap;
			margin-right: .5rem;
			position: relative;

			img {
				width: 4rem;
				height: 4rem;
			}

			&::after {
				display: none;
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #eee;
				opacity: .8;
			}
		}
	}

	.mb-order-list {
		display: flex;
		flex-direction: column;
		margin-top: 1rem;

		.order-info {
			color: #666;
			font-size: 0.6rem;
			padding: 0.5rem 0;
			margin: 0 0.5rem;
			border-top: 1px solid #ddd;
			text-align: left;
			line-height: 17px;
		}

		.order-item-close {
			background-color: #eee !important;

			.order-img {
				&::after {
					display: block;
				}
			}
		}

		.order-item {
			position: relative;
			border-radius: .2rem;
			background-color: #fff;
			margin: 0.5rem 0px;

			.order-no {
				padding: 0.5rem 0;
				margin: 0 0.5rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 0.6rem;
				border-bottom: 1px solid #ddd;
				box-sizing: border-box;
			}

			.order-status {
				border: 1px solid #ccc;
				padding: 4px;
				border-radius: 4px;
			}
		}
	}

	.commonDialogSlot_deletBox_1Tm2F {
		border-radius: 0.3rem;
		background: rgb(255, 255, 255);
		width: 540px;
		height: 20%;

		@media only screen and (max-width: 900px) {
			width: 16rem;
		}
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_deletIconBox_2ErC {
		height: 1.8rem;
		background: #ff5900;
		position: relative;
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_deletIconBox_2ErC i {
		position: absolute;
		width: 1.3rem;
		height: 1.3rem;
		display: block;
		right: 0.35rem;
		top: 50%;
		margin-top: -0.65rem;
		background-color: #fff;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: 1.3rem 1.3rem;
	}

	.notReviewBox {
		text-align: left;

		.cannotReview_title_ZLvpO {
			text-align: center;
			font-size: .9rem;
			color: #222;
		}

		.cannotReview_label_J7cwm {
			display: block;
			margin: .5rem 0;
		}
	}

	.commonDialogSlot_deletBox_1Tm2F .commonDialogSlot_content_1izEx {
		padding: 0.75rem 0.75rem 0.75rem 0.75rem;
		font-size: 0.775rem;
		color: #404040;
		text-align: center;
		line-height: 1rem;
	}

	.stepBox {
		font-size: .7rem;
		text-align: left;

		.stepItem {
			display: flex;
			margin-top: .7rem;
			align-items: center;

			.num {
				color: #bbb;
				font-size: .8rem;
				font-weight: 700;
				position: relative;
				text-align: center;
				width: 1.2rem;
				height: 1.2rem;
				line-height: 1.2rem;
				border-radius: 50%;
			}

			.num--active {
				color: #ff5900;
			}

			.num--currentActive {
				color: #ff5900;
				background: rgba(80, 190, 141, .2);
			}
		}

		.text {
			color: #777;
			margin-left: .8rem;
		}

		.text--active {
			color: #222;
		}

		.text--currentActive {
			font-weight: 700;
		}
	}

	.common-text-color {
		color: #ff5900;
	}

	.apply-body-btn {
		width: 14rem;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		margin: 1rem auto;
		color: #fff;
		background-color: #ff5900;
	}

	.reward-text-tooltip {
		font-size: 0.6rem;
		color: #666;
	}

	.noDataBox {
		text-align: center;

		.shopCar {
			margin-top: 1rem;
			font-size: 3.6rem;
			height: 3.5rem;
			color: #999;
		}

		.noneBtn {
			cursor: pointer;
			width: 11rem;
			height: 1.6rem;
			color: #fff;
			text-align: center;
			line-height: 1.6rem;
			background: #ff5900;
			display: inline-block;
			font-size: .7rem;
		}

		.noneText {
			font-size: .65rem;
			color: #999;
			margin: 1rem 0 1.2rem 0;
			line-height: 1rem;
		}
	}

	.order-box-warp {
		padding: 0 .6rem 1rem;
		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}




		.review-text {
			display: flex;
			color: #000;

		}

		/deep/.van-collapse-item__content {
			color: #444;
			font-size: .7rem;
			padding: .35rem .4rem;
			font-family: Roboto;
			zoom: 1;
			background: #fff url() no-repeat;
			background-position: .45rem 0;
		}

		/deep/.el-tooltip__popper.is-light {
			background-color: #fff !important;
			border: 0px !important;
		}

		/deep/.van-collapse-item__title {
			background: #ffaf5b;
			color: #fff;
			padding: .28rem .5rem;
			padding-right: .5rem;
		}

		/deep/.van-cell__title {
			text-align: left;
		}

		/deep/.van-cell__right-icon {
			color: #fff;
		}
	}



	.status-box {
		margin-left: .6rem;
		margin-right: .6rem;
		padding: 0 0 0 .5rem;
		font-size: .7rem;
		box-sizing: border-box;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		display: none;

		@media screen and (max-width: 900px) {
			display: flex;
		}

		.commonShadow {
			box-shadow: 0, 0, 0, .3rem rgba(0, 0, 0, .2);

			&::before {
				display: none;
			}
		}

		.select-content {
			width: 100%;
			height: 2rem;
			line-height: 2rem;
			text-align: right;
			color: #ff5900;
			padding-right: .5rem;
		}

		.select-list {
			width: 100%;
			background-color: #f5f5f5;
			position: absolute;
			top: 2rem;
			left: 0;
			z-index: 11;
			display: none;
			transition: 0.3s all;
			opacity: 0;

			li {
				text-align: center;
				height: 2rem;
				line-height: 2rem;
				background-color: #f5f5f5;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 0.1rem;
			}

			.active {
				color: #ff5900;
			}
		}

		.select-box {
			float: right;
			text-align: center;
			height: 2rem;
			position: relative;
			width: 20rem;
			height: 2rem;
			position: relative;
			font-size: .7rem;
			color: #333;
		}

		.application-badge {
			border-radius: .5rem;
			background-color: #ffaf52;
			color: #fff;
			font-size: .6rem;
			padding: .1rem .1rem;
			margin-left: .1rem;
			height: .55rem;
			line-height: .9em;
			transform: scale(.9);
			vertical-align: top;
			display: inline-block;
		}

		.status-content {
			position: relative;
			color: #ff5900;
			width: 100%;
			box-sizing: border-box;
			height: .7rem;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;

			span {
				border-radius: .5rem;
				background-color: #ffaf52;
				color: #fff;
				font-size: .6rem;
				padding: .1rem .1rem;
				margin-left: .1rem;
				height: .55rem;
				line-height: .9em;
				transform: scale(.9);
				vertical-align: top;
				display: inline-block;
			}
		}
	}

	.wallet-box {
		height: 3.9rem;
		margin: .5rem auto;
		border-radius: .2rem;
		border: 1px solid #ffaf5b;
		font-size: .7rem;
		box-sizing: border-box;
		background: rgba(255, 175, 91, .2);
		display: none;
		flex-direction: column;
		padding: 0 10px;
		align-items: flex-start;
		padding: 0.5rem;
		box-sizing: border-box;

		@media screen and (max-width: 900px) {
			display: flex;
		}

		.wallet-box-title {
			font-size: 14px;
			color: #333;
		}

		.wallet-box-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 0.3rem;

			.priceText {
				color: #ff6110;
				font-size: 30px;

				span {
					font-size: 18px;
					font-weight: bold;
				}
			}

			.withdraw-btn {
				padding: 0 0.4rem;
				height: 1.5rem;
				line-height: 1.5rem;
				color: #fff;
				text-align: center;
				background: #ffaf5b;
				border-radius: 4px;
			}
		}
	}



	// 。。。。。。。。。。。。。。。。。。。pc端。。。。。。。。。。。。。。。。。

	.apply-order {
		margin-top: .5rem;
		text-align: left;

		.van-radio-group {
			margin-top: 0.5rem;

			.van-radio {

				font-size: 0.6rem;
			}
		}

		.apply-order-submit {
			display: block;
			height: 1.75rem;
			line-height: 1.75rem;
			margin-top: 0;
			background-color: #ffaf52;
			color: #fff;
			width: 95%;
			border: none;
			margin-bottom: .1rem;
			border-radius: 5px;
		}

		.apply-photo-image {
			position: relative;

			.van-image {
				display: block;
				width: 80px;
				height: 80px;
				overflow: hidden;
				border-radius: 8px;
			}

			.van-icon {
				position: absolute;
				z-index: 9999;
				font-size: 1rem;
				display: block;
				top: -0.5rem;
				right: -0.5rem;
				border-radius: 50%;
				cursor: pointer;
				background-color: #fff;
			}
		}

		.apply-photo {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 1rem auto .5rem;

			.Example {
				width: 5rem;
				height: 3rem;

				@media screen and (max-width: 900px) {
					width: 3rem;
				}
			}

			.uploadImg img {

				width: 8.6rem;

			}
		}

		.van-cell {
			width: 100%;
			border: .01rem solid #b5b5b5;
			padding: .2rem .6rem;
			margin-bottom: .4rem;
			font-size: .7rem;
			color: #000;
			box-sizing: border-box;
		}

		.apply-order-title {
			font-size: .8rem !important;
			text-align: left;
			margin-bottom: 0.5rem;
			color: #ffaf52;
		}

		.apply-amount {
			position: relative;
			color: #ffaf52;
			line-height: 1rem;
			text-align: left;
			font-size: 0.5rem;
		}
	}

	.apply-content {
		width: 520px;

		@media screen and (max-width: 900px) {
			width: 16rem;
		}

		.apply-header {
			position: relative;
			height: 1.8rem;
			line-height: 1.8rem;
			background-color: #ff5900;

			.van-icon {
				position: absolute;
				width: 1.5rem;
				height: 1.5rem;
				font-size: 1.5rem;
				display: block;
				right: .35rem;
				top: 50%;
				margin-top: -.65rem;
				border-radius: 50%;
				color: #fff;
			}
		}

		.apply-body {
			padding: 1em;
			max-height: 18rem;
			overflow-y: scroll;
			font-size: .875em;
			color: #757575;
			background-color: #fff;
		}
	}



	.orangeColor {
		color: #ffaf52 !important
	}

	.overFlow_routerBox_warper {
		flex: 1;
		margin-left: 20px;
		width: calc(100% - 2%);
		background-color: rgb(245, 245, 245);
		margin-left: 20px;

		@media screen and (max-width: 900px) {
			margin: 0 auto 4rem;
		}
	}

	.overFlow_routerBox_centent {
		height: auto;

		/* overflow: auto; */
		background-color: rgb(245, 245, 245);

		@media screen and (max-width: 900px) {
			display: none;
		}

	}

	.centent_title {
		font-size: 14px;
		/* min-width: 1400px; */
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.statusList-list {


		width: 100%;
		display: flex;
		justify-content: space-around;
		color: rgb(87, 85, 86);
		font-size: 16px
	}

	.statusList-list li {
		justify-content: space-around;
		cursor: pointer;
		margin: 4px 0.6rem;
	}

	.statusList-list a {
		border-bottom: 2px solid transparent;
	}

	.application-review {
		/* margin-top: 15px; */
		color: #fff;
		font-size: 14px;
		padding: 8px 16px;
		font-family: Roboto;
		zoom: 1;
		background: #ffaf5b url(https://www.rebatest.com/Image/new-image/5-120601152222.gif) no-repeat;
		background-position: 14px 0;
		text-align: left;
	}

	.boxWrap {
		margin-top: 15px;
		margin-bottom: 4rem;

		@media screen and (max-width: 900px) {
			display: none;
		}
	}

	.review-text {
		display: inline-block;

	}

	.isShowBorder {
		border-bottom: 2px solid #ccc !important
	}

	.orderItem_orderItem {
		margin-top: 14px;
		padding-left: 0;
		background-color: #fff;
		position: relative;
	}

	.orderItem_orderItem_top {
		display: flex;
		align-items: center;
		font-size: 14px !important;

	}

	.orderItem_imgBox {
		flex-basis: 160px;
		height: 160px;
		margin: 0 18px;
		flex-wrap: nowrap;
	}

	.orderItem_contentBox_text1 {
		flex: 1;
		padding-right: .75rem;
		padding-top: .5rem;
		padding-bottom: .5rem;
		text-align: left;
	}

	.orderItem_contentBox_text2 {
		flex-basis: 10rem;
		height: 200px;
		width: 200px;
	}

	.orderItem_contentBox_text3 {
		flex-basis: 10rem;
		height: 120px;
		width: 180px;
		margin-right: 20px;

	}

	.orderItem_contentBox_text4 {
		flex-basis: 180px;
		width: 180px;
		height: 120px;
		background-color: red;
	}


	.orderItem_contentBox_text_p1 {
		font-size: .7rem;
		color: #858585;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: .3rem
	}

	.orderItem_contentBox_text_sapn1 {
		background-color: #ff5900;
		color: #fff;
		font-size: .6rem;
		border-radius: .5rem;
		display: inline-block;
		margin: .2rem 0 .2rem .5rem;
		padding: 0 .2rem;
	}

	.orderItemTimeBox {
		height: 1.9rem;
		line-height: 1.9rem;
		font-size: 14px;
		margin-left: -.5rem;
		font-size: 14px;
		padding-left: 1.5rem;
		height: 1.9rem;
		line-height: 1.9rem;
	}

	.van-count-down {
		color: #323233;
		font-size: 14px;
		line-height: 20px;
	}

	.orderItem_contentBox_text2_top {
		display: flex;
		/* margin: 0 1.1rem; */
		padding: 0;
		font-size: .7rem;
		color: #595757;
		padding-bottom: .25rem;
		margin: 1rem 0;
		justify-content: center;
		text-align: left;
		margin: 20px 0px;
		width: 200px;
		height: 21px;
		line-height: 21px;
	}

	.orderItem_contentBox_text2_top_X {
		width: 200px;
		height: 37px;
	}

	.orderItem_contentBox_text2_top_p {
		flex: 1;
		width: 120px;
		display: inline-block;

	}

	.no_text {
		display: flex;
		margin: 0 1.1rem;
		padding: 0;
		font-size: .7rem;
		color: #595757;
		padding-bottom: .25rem;
		margin: 1rem 0;
	}

	.orderItem_contentBox_text2_top_span {
		flex-basis: 4rem;
		line-height: 1px;
		width: 80px;
	}

	.orderItem_yellowBtn_text3_centent01 {
		width: 140px;
		height: 30px;
		box-sizing: border-box;
		margin-top: 10px;
		color: #fff;
		text-align: center;
		line-height: 28px;
		cursor: pointer;
		margin-top: 10px;
		border: 1px solid #ccc;
		color: #000;
	}

	.colro_text03 {
		flex-basis: 180px;

	}

	.orderItem_contentBox_text2_top_sapn {
		width: 80px;
		font-weight: 600;
	}

	.color_text03_a {
		background-color: #ffaf52;
		border: 1px solid #ccc;
		color: white;
	}

	.orderItem_orderItem_bottom {
		display: flex;
		height: 50px;
	}

	ul {
		list-style-image: none;
		list-style-position: outside;
		list-style-type: none;
		font-weight: 400;
		margin: 0;
		padding: 0
	}

	.orderItem_orderItem_bottom_ul {
		flex: 1;
		height: 50px;
		display: flex;
	}

	.orderItem_orderItem_bottom_ul li {
		flex: 1;
		text-align: center;
		height: 50px;
	}

	.orderItem_orderItem_bottom_ul_span-active {
		border-color: #ff5900 !important;

		.color_i {
			border-color: #ff5900 !important;
		}
	}

	.orderItem_orderItem_bottom_ul_span {
		position: relative;
		border: .1rem solid #757575;
		display: inline-block;
		width: .7rem;
		height: .7rem;
		border-radius: 50%;
		margin-top: .3rem;
		text-align: center;
	}

	.color_i {
		display: block;
		margin: .05rem;
		border-radius: 50%;
		width: .5rem;
		height: .5rem;
		border: .05rem solid #757575;
	}

	.color_i::after {
		width: 298px;
		height: .05rem;
		top: .35rem;
		left: 16px;
		content: "";
		background: #e6e6e6;
		position: absolute;
	}

	.color_ix {
		display: block;
		margin: .05rem;
		border-radius: 50%;
		width: .5rem;
		height: .5rem;
		border: .05rem solid #757575;
	}

	.orderItem_orderItem_bottom_ul_p {
		/* width: 296px; */
		height: 17px;
		color: #757575;
		font-size: 14px;
		font-family: Helvetica, Arial, sans-serif;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-align: center;
		/* position: relative; */
		/* left: 20px  ; */
	}

	.importantText {
		font: size 0.4rem !important;
		;
	}

	.orderItem_orderItem-bottomBox_1ZNdJ {
		background-color: #ff5900;
		color: #fff;
		text-align: center;
		font-size: .7rem;
		padding: .3rem 1rem;
	}


	.hhh {
		position: relative;
		width: .9rem;
		height: .9rem;
		display: inline-block;
		background: url() 0 0 no-repeat;
		top: -.1rem;
	}

	.reward-text {
		width: 16.5rem;
		padding: .25rem .5rem;
		position: absolute;
		z-index: 87;
		line-height: 1.1rem;
		display: block;
		top: 1.5rem;
		right: -2.8rem;
		background-color: #f7f7f7;
		color: #838383;
		border-radius: 4px;
	}

	.commonShadow::before {
		border-bottom: 9px solid transparent;
		border-right: 9px solid #f7f7f7;
		;
		border-top: 9px solid transparent;
		content: " ";
		display: inline-block;
		height: 0;
		margin-left: -19px;
		width: 0;
		position: relative;
		top: -16px;
		transform: rotate(90deg);
		left: 205px;
		z-index: 999;
		font-size: 0.6rem;
	}

	.commonShadow {
		box-shadow: 0 0 0.3rem rgba(0, 0, 0, .4);
	}
</style>
